<script lang="ts" setup>
import { defineProps } from "vue";
import defaultImg from "../../../assets/logo.png";
// 评论数据
const { commentData } = defineProps(["commentData", "textColor"])
// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};

</script>

<template>
  <ul>
    <li v-for="(item, index) in commentData">
      <div class="headPicture">
        <img v-lazy="`${item.user.avatarUrl}`">
      </div>
      <div class="textWrap">
        <p class="userAndText">
          <span class="user">
            {{ item.user.nickname }}
            <span v-if="item.user.vipType === 1" class="iconfont icon-VIP-1"></span>
            <span v-if="item.user.vipType === 2" class="iconfont icon-VIP-02"></span>
            <span v-if="item.user.vipType === 3" class="iconfont icon-VIP-03"></span>
            <span v-if="item.user.vipType === 4" class="iconfont icon-VIP-04"></span>
            <span v-if="item.user.vipType === 5" class="iconfont icon-VIP-"></span>
            <span v-if="item.user.vipType === 6" class="iconfont icon-VIP-06"></span>
            <span v-if="item.user.vipType === 7" class="iconfont icon-VIP-07"></span>
            <span v-if="item.user.vipType === 8" class="iconfont icon-VIP-08"></span>
            <span v-if="item.user.vipType === 9" class="iconfont icon-VIP-09"></span>
            <span v-if="item.user.vipType === 10" class="iconfont icon-VIP-10"></span>
            <span v-if="item.user.vipType === 11" class="iconfont icon-VIP-11"></span>
            :
          </span>
          <span class="text" :class="textColor === 'white' ? 'white' : ''">{{ item.content }}</span>
        </p>
        <p class="childCommon" :class="textColor === 'white' ? 'white2' : ''" v-if="item.beReplied.length">
          <span class="childUser">{{ item.beReplied[0].user.nickname }}: </span>
          <span class="childContent" :class="textColor === 'white' ? 'childCom' : ''">{{ item.beReplied[0].content
          }}</span>
        </p>
        <div class="timeAndMore" :class="textColor === 'white' ? 'white' : ''">
          <span>{{ item.timeStr }} {{ item.time }}</span>
          <div class="mores">
            <p :class="textColor === 'white' ? 'white' : ''"><span class="iconfont icon-dianzan"></span>{{ item.likedCount
            }}</p>
            <p :class="textColor === 'white' ? 'white' : ''" class="iconfont icon-fenxiang"></p>
            <p :class="textColor === 'white' ? 'white' : ''" class="iconfont icon-kuaisuhuifu"></p>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
ul {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  li {
    display: flex;
    width: 100%;
    min-height: 80px;
    padding: 15px 0;
    box-sizing: border-box;

    .headPicture {
      flex-basis: 50px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .textWrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 10px;

      p {
        font-size: $font-size-xs;
        color: $font_second_color;
      }

      .userAndText {
        line-height: 18px;

        .user {
          color: rgb(80, 125, 175);

          span {
            vertical-align: -2px;
          }

          .icon-VIP-1 {
            color: rgb(253, 237, 212)
          }

          .icon-VIP-02 {
            color: rgb(158, 196, 246)
          }

          .icon-VIP-03 {
            color: rgb(240, 76, 124)
          }

          .icon-VIP-04 {
            color: rgb(216, 99, 242)
          }

          .icon-VIP- {
            color: rgb(76, 180, 231)
          }

          .icon-VIP-06 {
            color: rgb(252, 193, 45)
          }

          .icon-VIP-07 {
            color: rgb(243, 166, 148)
          }

          .icon-VIP-08 {
            color: rgb(220, 199, 225)
          }

          .icon-VIP-09 {
            color: rgb(221, 187, 153)
          }

          .icon-VIP-10 {
            color: rgb(229, 168, 75)
          }

          .icon-VIP-11 {
            color: rgb(102, 43, 31)
          }
        }

        .text {
          color: $font_main_color;
        }
      }

      .childCommon {
        line-height: 25px;
        padding-left: 10px;
        border-radius: 10px;
        margin-top: 10px;
        background-color: rgb(250, 250, 250);

        .childUser {
          color: rgb(80, 125, 175);
        }

        .childContent {
          color: $font_main_color;
        }
      }

      .timeAndMore {
        display: flex;
        justify-content: space-between;
        font-size: $font-size-xs;
        color: $font_second_color;
        margin-top: 10px;

        .mores {
          display: flex;
          justify-content: end;
          align-items: center;

          >p {
            padding: 0 10px;
            font-size: 14px;
            color: $font_second_color;

            &~p {
              border-left: 1px solid $lineColor;
            }

            &:hover {
              color: $font_main_color;
            }
          }

          .icon-kuaisuhuifu {
            font-size: 16px;
          }
        }
      }
    }

    &~li {
      border-top: 1px solid $lineColor;
    }
  }
}

.white {
  color: #fff !important;
}

.childCom {
  color: rgba(255, 255, 255, 0.59) !important;
}

.white2 {
  background-color: rgba(255, 255, 255, 0.23) !important;
}
</style>
